<template>
  <div>
    <div class="newFocus">
      <div class="title_textLeft">
        <img src="../../../assets/homepage/newsFocus.png" class="title_img" >
        <a style="margin-top: 33px;">要闻聚焦</a>
        <a href="#" class="title_more">更多</a>
      </div>
      <div class="information">
       <div class="fixed_window">
         <div class="newFocus_imgs">
           <a :href="news_imgs.link" v-for="(news_imgs ,index) of news"> <img   :src="news_imgs.news_img" class="newFocus_img" style="z-index: 1" v-if="index==cur"></a>
         </div>
         <div class="newFocus_font" >
           <a v-for="(news_link,index) of news"  :href="news_link.link" class="newFocus_link" v-if="index==cur">{{news_link.content}}</a>
         </div>
         <div class="newFocus_circle">
           <div v-for="(circle,index) of news" class="circle_link">
             <div v-bind:class="{active:arr[index]}"><a :href="circle.link" class="circle_radius" v-on:mouseenter="change(index)"></a></div>
           </div>
         </div>
       </div>

        <div class="newFocus_news">
          <div class="news_content" v-for="information of news">
            <a :href="information.link" class="news_art">{{information.date+information.content}}</a>
          </div>
        </div>

      </div>
      <div class="service">
           <a href="#" v-bind:class="{changecolor1:changecolor1,color1:!changecolor1}" v-on:mouseenter="changecolor1=!changecolor1;color1=changecolor1" v-on:mouseleave="changecolor1=!changecolor1;color1=changecolor1">
              <span style="width: 45px;height: 30px">
                 <img style="margin-left: 30px;margin-top:12px;float:left" src="../../../assets/homepage/enter.png">
              </span>
              <span style="float: left;margin-top:35px;margin-left: 10px;font-weight: bold;color: rgb(117,88,52);">我要入驻</span>
           </a>
          <a href="#"v-bind:class="{changecolor2:changecolor2,color2:!changecolor2}" v-on:mouseenter="changecolor2=!changecolor2;color2=changecolor2" v-on:mouseleave="changecolor2=!changecolor2;color2=changecolor2">
              <span>
                <img style="margin-left: 30px;margin-top:12px;float:left" src="../../../assets/homepage/service.png" >
              </span>
              <span style="float: left;margin-top:35px;margin-left: 10px;font-weight: bold;color:white;">园区服务</span>
          </a>
          <a v-bind:class="{changecolor3:changecolor3,color3:!changecolor3}" v-on:mouseenter="changecolor3=!changecolor3;color3=changecolor3" v-on:mouseleave="changecolor3=!changecolor3;color3=changecolor3">
              <span>
                <img  style="margin-left: 30px;margin-top:12px;float:left" src="../../../assets/homepage/rongzi.png">
              </span>
              <span style="float: left;margin-top:35px;margin-left: 10px;font-weight: bold;color: rgb(40,47,76)">我要融资</span>
          </a>
      </div>
    </div>


  </div>
</template>

<script>



  export default {
    name: 'newFocus',
    data: function () {
      return {
        changecolor1: false,
        changecolor2: false,
        changecolor3: false,
        underline: false,
        news_font: "科技创新局联合党支部 组织观看十九大直播的报告",
        active:false,
        news_article:"[10-19]科技创新局联合党支部 组织观看十九大直播的报告",
        max: 5,
        cur: 0,
        arr:[true,false,false,false,false],
        news:[
          {
            news_img: require('../../../assets/homepage/newsFocus/newsFocus_img1.png'),
            content: "科技创新局联合党支部 组织观看十九大直播的报告",
            date:"[10-19]",
            link:"getDetailNews?which=news&parkInfoId=133",
          },
          {
            news_img: require('../../../assets/homepage/newsFocus/newsFocus_img2.png'),
            content: "“互联网+主题培训暨人才需求对接沙龙活动”在重庆互联网学院拉开帷幕",
            date:"[09-16]",
            link:"getDetailNews?which=news&parkInfoId=127",
          },
          {
            news_img: require('../../../assets/homepage/newsFocus/newsFocus_img3.png'),
            content: "新加坡总理公署部长陈振声一行考察两江新区互联网产业园",
            date:"[09-02]",
            link:"getDetailNews?which=news&parkInfoId=125",
          },
          {
            news_img: require('../../../assets/homepage/newsFocus/newsFocus_img4.png'),
            content:"中央军委唐智勇大校一行参观考察两江新区互联网产业园",
            date:"[09-01]",
            link:"getDetailNews?which=news&parkInfoId=124",
          },
          {
            news_img: require('../../../assets/homepage/newsFocus/newsFocus_img5.png'),
            content:"崧泰益生琥珀茶油携手驾图“加油追女神” 跨界合作取得圆满成功",
            date:"[08-22]",
            link:"getDetailNews?which=news&parkInfoId=123",
          },
        ]
      }
    },
    mounted(){
      this.link_timing();
    },
    beforeDestroy() {
      clearInterval(this.link_timing());
    },
    methods:{
      change: function(pointer){
       this.change_link(pointer);
        this.change_color(pointer);
      },
      change_link: function (pointer) {
        this.cur=pointer;
      },
      change_color: function(pointer) {
        var a=[true,false,false,false,false];
         for (var i=0;i<this.max;i++){
           if(i==pointer) 
             a[i] = true;
           else
             a[i]=false;
         }
        this.arr=a;
      },
      link_timing: function () {
        let t=120;
        setInterval(function () {
          t--;
          if(t>0){
            if(this.cur==4)
              this.cur=0;
            else{
              this.cur++;
              this.change_color(this.cur);
            }
          }
        },1000)



      }
    }

  }

</script>

<style scoped lang="scss">
  .newFocus_link{
    text-decoration: none;
    font-size: 18px;
    line-height: 50px;
    color: #FFF;
    margin-left: 10px;
  }
  .newFocus{
    width: 1004px;
    height: 330px;
    margin:0 auto;
  }
  .newFocus_imgs{
    width: 2120px;
    height: 242px;
    margin-top: 26px;
    float: left;
    margin-left: 7px;
    display: inline-block;
  }
  .circle_link{
    display: inline-block;
    margin-top: 14px;
    margin-left: 8px;
  }
  .newFocus_img{
    width: 424px;
    height: 242px;
    position: relative;
    display: inline-block;
  }
  .newFocus_news{
    width: 307px;
    height: 242px;
    background-color: rgb(245,245,245);
    float: right;
    margin-top: 26px;
  }
  .newFocus_circle{
    width: 89px;
    height: 50px;
    position: absolute;
    z-index: 3;
    background-color: #000;
    opacity: 0.6;
    margin-left: 341px;
    margin-top: 218px;

  }
  .underline_show{
    text-decoration: underline;
  }
  .newFocus_font{
    width: 334px;
    height: 50px;
    position: absolute;
    background-color: #000;
    opacity: 0.6;
    margin-left: 7px;
    margin-top: 218px;
    font-family: "Microsoft Yahei", Arial, "Lucida Grande",
    "Hiragino Sans GB", "Hiragino Sans GB W3", SimSun, STHeiti;
    z-index: 3 ;
  }


  .title_img{
    float: left;
    height: 25px;
    width: 25px;
    margin-top: 11px;
    border: none;
  }
  .title_textLeft{
    float: left;
    font-size: 16px;
    line-height: 47px;
    height: 40px;
    border-bottom: 1px solid rgb(81,123,192);
    font-weight: bold;
    width: 737px;
  }

  .title_textLeft a{
    color:rgb(81,123,192);
  }
  .title_more{
    text-decoration: none;
    margin-left: 612px;
    font-size: 13px;
    font-weight: bold;
  }
  .color1{
    width: 221px;
    height: 79px;
    background-color: rgb(254,227,107);
    margin-bottom: 16px;
    float: left;
    display: block;
    margin-left: 46px;
  }
  .changecolor1{
    width: 221px;
    height: 79px;
    margin-bottom: 16px;
    float: left;
    display: block;
    margin-left: 46px;
    background-color: rgb(203,182,86);
  }
  .color2{
    width: 221px;
    height: 79px;
    background-color: rgb(255,97,96);
    margin-bottom: 16px;
    float: left;
    display: block;
    margin-left: 46px;
  }
  .changecolor2{
    width: 221px;
    height: 79px;
    background-color: rgb(204,78,77);
    margin-bottom: 16px;
    float: left;
    display: block;
    margin-left: 46px;
  }
  .color3{
    width: 221px;
    height: 79px;
    background-color: rgb(106,145,207);
    margin-bottom: 16px;
    float: left;
    display: block;
    margin-left: 46px;
  }
  .changecolor3{
    width: 221px;
    height: 79px;
    background-color: rgb(85,116,166);
    margin-bottom: 16px;
    float: left;
    display: block;
    margin-left: 46px;
  }
  .fixed_window{
   position: relative;
    width: 430px;
    height: 286px;
    overflow: hidden;
    display: inline-block;
  }
  a{
    color:rgb(81,123,192);
  }

  .news_content{
    width: 230px;
    height: 44px;
    border-bottom: 1px dashed rgb(200,200,200);
    margin: 0 auto;
  }
  .information{
    height: 266px;
    width:737px;
    float: left;
  }
  .circle_radius{
    border: 4px solid;
    height: 0px;
    width: 0px;
    border-radius: 8px;
    display: inline-block;
  }
  .newFocus_font a:hover{
    text-decoration: underline;
  }
  .news_art{
    line-height: 44px;
    height: 44px;
    text-decoration: none;
    width: 230px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: block;
    font-family: "Microsoft Yahei", Arial, "Lucida Grande",
    "Hiragino Sans GB", "Hiragino Sans GB W3", SimSun, STHeiti;
    color: #4a4a4a;
    cursor: auto;
    font-size: 13px;
  }
  .news_content a:hover{
    text-decoration: underline;
  }

  .circle_link a{
    color: #FFF;
  }
  .active a{
    color: green;
  }

</style>
